/** @jsxImportSource @emotion/react */
import * as React from "react";
import {CCell, Cell, Embed, RCell, Table, TableBody, TableRow, Text, useTheme,} from "customize-easy-ui-component";
import {DirectLink, } from "../../../routing/Link";
import {useFolder, } from "../../hook/useMainRepUrlOr";
import {俩列检验设备概况} from "../../park/views";
import {config证书概要} from "./editCert";
import {ReportFirstPageHeadNrno} from "../../gas/rarelyVary";

//证书
export const CertificatePage= ({ orc, rep, children} : { orc: any,rep: any,children?: React.ReactNode}
) => {
  const theme= useTheme();
  const callback = () => {
    return <div  css={{"@media print": {height:'100vh', overflowY: 'hidden',} }}>
        { ReportFirstPageHeadNrno({theme,rep, mbbm:'（ FJB/DB 1039-1-0-2020 ）'}) }
        <div css={{
          "@media print": {
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-around',
            height: 'calc(100vh - 4rem)',     //剪掉上面头部的高度
          }
        }}>
          <Text variant="h3" css={{textAlign:'center',lineHeight:'0.8', "@media print": {fontSize: theme.fontSizes[5],},}}>
            特种设备监督检验证书<br/>
            <Text>（压力管道安装、改造和重大修理）</Text>
          </Text>
          <div>
            <div css={{display: 'flex',justifyContent: 'space-between',}}>
              &nbsp;
              <Text css={{display: 'flex',flexDirection: 'row-reverse',marginRight: '2rem'
              }}>证书编号：{rep.isp?.no}</Text>
            </div>
            <Table fixed={  ["15%", "%", "12.5%", "25%"] }  css={ {borderCollapse: 'collapse',} }  tight  miniw={800}>
              <TableBody>
                <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/CertificateSummary`}>
                    {俩列检验设备概况({orc,rep, config:config证书概要})}
                </DirectLink>
              </TableBody>
            </Table>
            <Table fixed={  ["%" ] }  css={ {borderCollapse: 'collapse',} }  tight  miniw={800}>
              <TableBody>
                <TableRow>
                  <CCell id={'SjcqHCer'}>
                    <Table className='FixedDown' fixed={ ["24%", "39%", "8%", "%"] }
                           css={ {borderCollapse: 'collapse',
                             //TD Cell 限制 maxHeight 是没法起作用的；需要用height；
                             //【全部上级div都会被选中的】"div:has(&)": { height:'fill-available' }  只能增加类标记 id；同时满足 3 个条件的才能算！
                             "div:has(&) #SjcqHCer div": {
                                  overflow:'hidden',
                                 "@media print": {minHeight:'22rem',}
                             }
                           } }  tight  miniw={800}>
                      <TableBody css={ {height:'100%' } } >
                        <TableRow>
                          <Cell css={{border:'none',textIndent:'2rem'}} colSpan={4}>按照《中华人民共和国特种设备安全法》、《特种设备安全监察条例》的规定，该压力管道的施工经本机构实施监督检验，
                            安全性能符合《压力管道安全技术监察规程—工业管道》（TSG D0001-2009）、《压力管道监督检验规则》（TSG D7006-2020）的要求，特发此证书。
                          </Cell>
                        </TableRow>
                        <TableRow>
                          <Cell css={{border:'none'}} colSpan={4}>
                            <Text css={{fontSize:'0.9rem'}}>
                              附：1.压力管道数据表<br/>
                              <Text css={{textIndent:'1.8rem',display:'block',fontSize:'0.9rem'}}>2.工业管道施工监督检验报告</Text>
                            </Text>
                          </Cell>
                        </TableRow>
                        <TableRow css={{"@media print": {height:'3rem'} }}>
                          <RCell css={{border:'none'}}>监督检验人员：</RCell>
                          <Cell css={{border:'none'}}>{orc.检验员}</Cell>
                          <RCell css={{border:'none'}}>日期：</RCell>
                          <Cell css={{border:'none'}}></Cell>
                        </TableRow>
                        <TableRow css={{"@media print": {height:'3rem'} }}>
                          <RCell css={{border:'none'}}>审   核：</RCell>
                          <Cell css={{border:'none'}}></Cell>
                          <RCell css={{border:'none'}}>日期：</RCell>
                          <Cell css={{border:'none'}}>2024-04-10</Cell>
                        </TableRow>
                        <TableRow css={{"@media print": {height:'3rem'} }}>
                          <RCell css={{border:'none'}}>批   准：</RCell>
                          <Cell css={{border:'none'}}></Cell>
                          <RCell css={{border:'none'}}>日期：</RCell>
                          <Cell css={{border:'none'}}>2024-04-10</Cell>
                        </TableRow>
                        <TableRow>
                          <RCell css={{border:'none'}}>监督检验机构：</RCell>
                          <Cell colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.name}</Cell>
                          <CCell css={{border:'none'}}>（盖章）</CCell>
                        </TableRow>
                        <TableRow>
                          <RCell  css={{border:'none'}}>监督检验机构核准证号：</RCell>
                          <Cell  colSpan={2} css={{border:'none'}}>{rep?.isp?.ispu?.agency?.apno}</Cell>
                          <CCell css={{border:'none'}}>2024-04-10</CCell>
                        </TableRow>
                        {/*                          <TableRow css={{height:'0rem',"@media print": {height:'fill-available'} }}>
                            <CCell css={{border:'none'}}></CCell>
                          </TableRow>*/}
                      </TableBody>
                    </Table>
                  </CCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>
          <Text css={{fontSize:'0.7rem'}}>注：本证书一式三份，一份监督检验机构存档，两份送交施工单位，其中一份由施工单位随竣工资料交付建设单位。
          </Text>
        </div>
      </div>
  }
  //Hash路由的id对应的DIV 不可以放在Collapse组件底下的。 还未加载组件的无法定位。
  const [renderAll]=useFolder(callback,'检验证书折叠',true);
  return <>
    <div id="Certificate"/>
    {renderAll}
  </>;
};


/*固定页 遇到浮动的排版：如何？ <Table 会自动调整行高，只好拆解上下并排的表格。
  <Table fixed={  ["15%", "%%", "12.5%", "25%"] }  css={ {borderCollapse: 'collapse',} }  tight  miniw={800}>
    <TableBody>
      <TableRow css={{"@media print": {height:'fill-available'} }}>
        <CCell id={'SjcqHCer'} colSpan={4}>
          <Table className='FixedDown' fixed={ ["24%", "39%", "8%", "%"] }
                 css={ {borderCollapse: 'collapse',
                   //TD Cell 限制 maxHeight 是没法起作用的；需要用height；
                   //【全部上级div都会被选中的】"div:has(&)": { height:'fill-available' }  只能增加类标记 id；同时满足 3 个条件的才能算！
                   "div:has(&) #SjcqHCer div": {
                        overflow:'hidden',
                       "@media print": {minHeight:'22rem',}
                   }
                 } }  tight  miniw={800}>
            <TableBody css={ {height:'100%' } } >
            </TableBody>
          </Table>
        </CCell>
      </TableRow>
    </TableBody>
  </Table>
* */
